<template>
  <div :style="styles">
    <Image v-bind="{...props.schema}"></Image>
  </div>
</template>



<script lang="ts" setup>
/**
 * h5 图片
 */
import { Image } from 'vant';
import {watch,computed} from 'vue'
import util from "@/utils/util"
const props = defineProps({
  schema: {
    type: Object,
    default: () => ({}),
  },
});
const styles=computed(()=>{
  let result={
    display: "flex",
  }
  if(props.schema){
    for(let key in props.schema){
      if(key.indexOf("styles.")!=-1){
        let n_key=key.replaceAll("styles.","");
        let value=props.schema[key];
        if(n_key.indexOf("padding-")!=-1){
          // value+="px";
          value+=props.schema.unit?props.schema.unit:"px"
        }
        result[n_key]=value;
      }
    }
    if(!props.schema.height&& props.schema.componentProps.height){
      result.height=props.schema.componentProps.height+getUnit()
    }
    if(props.schema.height){
      result.height=props.schema.height+getUnit();
    }
    if(!props.schema.width&& props.schema.componentProps.width){
      result.width=props.schema.componentProps.width+getUnit()
    }
    if(props.schema.width){
      result.width=props.schema.width+getUnit();
    }
  }
  // console.log("---props.schema::",props.schema)
  // console.log("---result::",result)
  return result;

});

function getUnit(){
  return props.schema.unit?props.schema.unit:props.schema.componentProps.unit
}


</script>

<style scoped>

</style>
